import { createRouter, createWebHistory } from "vue-router";
import { ref, watch } from "vue";
/* web */

// PC端路由
const routesPc = [
  {
    path: "/",
    redirect: "/index",
  },
  {
    path: "/index",
    name: "Index",
    component: () => import("../views/pc/layout.vue"),
    children: [
      {
        path: "/index", //首页
        name: "Index",
        component: () => import("../views/pc/index.vue"),
      },
      {
        path: "/major",
        name: "Major",
        component: () => import("../views/pc/secondaryPage/major.vue"),
      },
      {
        path: "/information",
        name: "Information",
        component: () => import("../views/pc/secondaryPage/information.vue"),
      },
      {
        path: "/overview",
        name: "Overview",
        component: () => import("../views/pc/secondaryPage/overview.vue"),
      },
    ],
  },
];

// 移动端路由表
const routesMB = [
  {
    path: "/",
    redirect: "/index",
  },
  {
    path: "/index",
    name: "index",
    component: () => import("../views/appMobile/index.vue"),
  },
];

// 声明变量用来接routers
var routes = [];
const screenWidth = ref();
// 获取页面宽度
screenWidth.value = document.body.clientWidth;
if (screenWidth.value <= 750) {
  console.log("is Mobile");
  routes = routesMB;
} else {
  routes = routesPc;
}
window.onresize = () => {
  screenWidth.value = document.body.clientWidth;
};
// 监听页面宽度
watch(
  screenWidth,
  (newVal, oldVal) => {
    let timer = setTimeout(() => {
      if (newVal <= 750) {
        // 小于758就是移动端 就把移动端路由表赋给routes
        console.log("is Mobile");
        routes = routesMB;
        window.location.reload();
      } else {
        // 大于就是pc端，把pc端路由表赋给routes
        routes = routesPc;
        window.location.reload();
      }
      // 重绘页面
    }, 1000);
    return () => {
      // 清除定时器
      clearTimeout(timer);
    };
  },
  {
    // 深度清除
    deep: true,
  }
);
// console.log(routes);
const router = createRouter({
  routes,
  history: createWebHistory(),
});

export default router;
